<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Equipment Group</title>
	<link rel="stylesheet" href="../js/easyui/themes/bootstrap/easyui.css">
	<link rel="stylesheet" href="../js/easyui/themes/icon.css">
	<link rel="stylesheet" href="../css/index.css" />
	<link rel="stylesheet" href="../css/index-ui.css" />
	<script type="text/javascript" src="../js/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/ams.util.js"></script>
	<script type="text/javascript" src="../js/webapi.js"></script>
	<script type="text/javascript" src="../js/ui_eq_group.js"></script>
</head>

<body onload="on_page_load()">
	<label id="label_group_name" class="name_label_1"> {groupname} </label>
	<div style="width:100%;height:900px">
		<canvas id="canvas_main" left="50" width="1000" height="950" background-color="#333333" style="border:0px solid #c3c3c3;">
		Your browser does not support the canvas element.
		</canvas>
	</div>
</body>

<script type="text/javascript">
var g_json_data = null
var grpName = null;

function __set_mouse_event()
{
	canvas_main.onmousemove = function(e)
	{
		var location = getLocation(this, e.clientX, e.clientY)
		
		for (var i = 0; i < g_json_data.eq_array.length; i++) {
			var eq = g_json_data.eq_array[i]
			if (location.x >= eq.x && location.x <= (eq.x + eq.width) &&
				location.y >= eq.y && location.y <= (eq.y + eq.height))// &&
				//(eq.state != 0))
			{
				this.style.cursor = 'pointer'
				return
			}
		}
		this.style.cursor = 'auto'
	}
	canvas_main.onmousedown = function(e)
	{
		var location = getLocation(this, e.clientX, e.clientY)
		
		for (var i = 0; i < g_json_data.eq_array.length; i++) {
			var eq = g_json_data.eq_array[i]
			if (location.x >= eq.x && location.x <= (eq.x + eq.width) &&
				location.y >= eq.y && location.y <= (eq.y + eq.height))// &&
				//(eq.state != 0))
			{
				window.open('../equipment/equipment.html?eq=' + eq.name + "#" + grpName, '_self')
				return
			}
		}
	}
}

function __on_data_complete(json_data)
{
	g_json_data = json_data
	document.getElementById('label_group_name').innerHTML = json_data.group_name
	draw_group_overview("canvas_main", json_data)
	__set_mouse_event()

	update()

	setInterval('__draw_st_blink()', 250)
}

function on_page_load()
{
	if (ams_is_sim_mode()) {
		$.getJSON("eq_group_layout_01.json", 
		function(json_data) {
			__on_data_complete(json_data)
		})
	} else {
	    grpName = get_page_param('group')

		$.ajax({
			type: 'POST',
			contentType: 'application/json',
			url: getWebServiceUrl("getGroupEqInfo"),
			data:JSON.stringify({
				"groupName": grpName
			}),
			dataType: 'json',
			success: function (json_data) {
				//console.log(JSON.parse(json_data.d))
				__on_data_complete(JSON.parse(json_data.d))
				//update()
			},
			error: function (response) {
					
				alert('Error: ' + response.responseText)
			}
		});

		// $.post(getWebServiceUrl("getGroupEqInfo"),
		// 	{ 'groupName': grp_id },
		// 	function(json_data) {
		// 		__on_data_complete(json_data)
		// 	},
		// 	'json')
		// 	.fail(function(response) {
		// 		alert('Error: ' + response.responseText)
		// 	})
	}
}

function update()
{
	if (ams_is_sim_mode()) {
		$.getJSON("eq_group_layout_01.json", function(json_data) {
			g_json_data = json_data
			draw_group_overview("canvas_main", json_data)
	 	})
	} else {
		$.ajax({
			type: 'POST',
			contentType: 'application/json',
			url: getWebServiceUrl("getGroupEqInfo"),
			data:JSON.stringify({
				"groupName": grpName
			}),
			dataType: 'json',
			success: function (json_data) {
				//console.log(JSON.parse(json_data.d))
				//__on_data_complete(JSON.parse(json_data.d))
				draw_group_overview("canvas_main", JSON.parse(json_data.d))
			},
			error: function (response) {					
				alert('Error: ' + response.responseText)
			}
		});
	}
	setTimeout('update()', 5000)
}

</script>

</html>
